<template>
	<div class="imageGroupPreview w-100 d-flex flex-column align-items-center rounded-5 overflow-hidden">
		<div class="w-100 p-3">
			<span @click="innerPreview = false" class="cursor-pointer hover-opacity"> <CollapseToTopIcon width="16" height="16" />收起 </span>
			<span @click="showPreview = true" class="ms-3 cursor-pointer hover-opacity">
				<MagnifyingGlassIcon width="14" height="14" />查看原图
			</span>
			<span @click="downloadFile(imgList[innerCurrent].originUrl)" class="ms-3 cursor-pointer hover-opacity">
				<DownloadMusicIcon width="13" height="13" />下载
			</span>
		</div>
		<ImagePreview :imgList="imgList" v-model:current="innerCurrent" v-model:visible="showPreview" />
		<div class="imgBox rounded-5 overflow-hidden position-relative" v-for="(img, imgIndex) in imgList" :key="imgIndex">
			<img v-if="innerCurrent === imgIndex" :style="{ width, height: `calc(${width} * ${img.height / img.width})` }" :src="img.originUrl" />
			<div class="mask w-100 h-100 position-absolute top-0 start-0 d-flex">
				<div
					:style="{ cursor: imgIndex !== 0 ? `url(${require('@/assets/img/arrowLeft.svg')}), default` : 'zoom-out' }"
					@click="imgIndex !== 0 ? innerCurrent-- : (innerPreview = false)"
				></div>
				<div @click="innerPreview = false" class="cursor-zoom-out"></div>
				<div
					:style="{ cursor: imgIndex !== imgList.length - 1 ? `url(${require('@/assets/img/arrowRight.svg')}), default` : 'zoom-out' }"
					@click="imgIndex !== imgList.length - 1 ? innerCurrent++ : (innerPreview = false)"
				></div>
			</div>
		</div>
		<div v-if="imgList.length > 1" class="dots d-flex py-3">
			<div
				:class="{ activeDot: innerCurrent === dotIndex }"
				class="dot rounded-circle"
				v-for="(dot, dotIndex) in imgList"
				:key="dotIndex"
			></div>
		</div>
	</div>
</template>

<script lang="ts">
import { downloadImg } from "@/utils/file";
import { computed, defineComponent, PropType, reactive, toRefs } from "vue";
interface ImageItem {
	originUrl: string;
	width: string;
	height: string;
}
export default defineComponent({
	props: {
		imgList: {
			type: Array as PropType<ImageItem[]>,
			default: () => [],
		},
		width: {
			type: String,
			default: "460px",
		},
		current: {
			type: Number,
			default: 0,
		},
		preview: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, context) {
		const state = reactive({
			innerPreview: computed({
				get: () => props.preview,
				set: (newV) => context.emit("update:preview", newV),
			}),
			innerCurrent: computed({
				get: () => props.current,
				set: (newV) => context.emit("update:current", newV),
			}),
			showPreview: false,
		});
		const downloadFile = (url) => {
			downloadImg(url);
		};
		return {
			...toRefs(state),
			console,
			downloadFile,
		};
	},
});
</script>

<style scoped lang="scss">
.imageGroupPreview {
	background-color: rgb(235, 235, 235);
	.imgBox {
		.mask {
			> div {
				flex: 1;
			}
		}
	}
	.dots {
		.dot {
			background-color: rgb(150, 150, 150);
			width: 8px;
			height: 8px;
		}
		.dot + .dot {
			margin-left: 5px;
		}
	}
}
.primaryTheme {
	.activeDot {
		background-color: $primary !important;
	}
}
.darkTheme {
	.activeDot {
		background-color: $dark !important;
	}
}
.freeTheme {
	.activeDot {
		background-color: $free !important;
	}
}
</style>
